<script setup>
defineOptions({
  name: 'AppHome'
})
import img from '@/assets/img/cat.jpeg'
// 使用pinia数据
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
const counterStore = useCounterStore()
// 直接使用store数据
console.log(counterStore.count, counterStore.doubleCount)
// storeToRefs解构store中的数据
const { count } = storeToRefs(counterStore)
console.log(count.value)
// 调用store中的action方法
counterStore.increment()
// 自动导入Vue API ref
const str = ref('string')
const iconName = ref('Edit')
</script>

<template>
  <main class="main">
    <!-- 测试动态组件 展示icon -->
    <el-icon :size="20">
      <component :is="iconName"></component>
    </el-icon>
    <!-- 测试自动导入ref -->
    {{ str }}
    <!-- 测试自动导入icon -->
    <el-icon :size="20">
      <Edit />
    </el-icon>
    <!-- 测试公共组件插件 -->
    <TestCom></TestCom>
    <!-- 测试自定义elementPlus主题色 -->
    <div class="one">
      <h1>This is an home page</h1>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Primary</el-button>
      <el-button type="warning">Primary</el-button>
      <el-button type="danger">Primary</el-button>
      <el-button type="info">Primary</el-button>
      <div class="test_scss">test_scss</div>
    </div>
    <!-- 图片懒加载 -->
    <div class="img_box">
      <img v-img-lazy="img" />
      <img v-img-lazy="img" />
      <img v-img-lazy="img" />
      <img v-img-lazy="img" />
      <img v-img-lazy="img" />
      <img v-img-lazy="img" />
    </div>
  </main>
</template>
<style lang="scss">
.main {
  padding: 15px;
  box-sizing: border-box;
  width: 100%;
  background-color: rgb(246, 246, 246);
  .one {
    height: 1000px;

    .test_scss {
      // 使用全局样式变量
      color: $color1;
    }
  }
  .img_box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    img {
      width: 33%;
      height: 300px;
      padding-bottom: 2px;
    }
  }
}
</style>
